<template>
  <div class="page-prize">
    <template v-if="prizeList.items">
      <div class="wo-prize-list">
        <div class="wo-item" v-for="(value, index) in prizeList.items">
          <div class="wo-item-head">
            <div class="wo-icon"><img class="wo-icon-image" v-bind:src="value.image||defaultAvatar" alt="avatar" /></div>
            <div class="wo-name">{{value.name}}</div>
            <div class="wo-price" v-if="value.price">￥<em>{{value.price}}</em></div>
          </div>
          <div class="wo-item-body">
            <div class="wo-content">{{value.product_name||'暂缺'}}</div>
          </div>
          <div class="wo-item-foot">
            <div class="wo-phone">
              <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-phone.png" alt="icon" /></i>
              <span>{{value.store_phone||'暂无'}}</span>
            </div>
            <div class="wo-address">
              <i class="wo-icon"><img src="../assets/image/icon-address.png" alt="icon" class="wo-icon-image"></i>
              <span>{{value.store_address||'暂无'}}</span>
            </div>
            <div class="wo-share" @click="setShareFunc(index)">
              <i class="wo-icon"><img class="wo-icon-image" src="../assets/image/icon-share.png" alt="icon" /></i>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <divider>暂无奖品</divider>
    </template>
  </div>
</template>

<script>
  import { Divider } from 'vux'
  import defaultAvatar from '../assets/image/avatar.png'
  export default {
    name: 'PrizePage',
    components: {
      Divider
    },
    data () {
      return {
        prizeList: {},
        defaultAvatar: defaultAvatar
      }
    },
    created: function () {
      // 获取列表
      this.prizeListFunc()
    },
    methods: {
      // 设置分享
      setShareFunc: function (index) {
        /*
        this.$vux.alert.show({
          title: '提示',
          content: '该功能暂未上线'
        })
        */
        let that = this
        that.$vux.loading.show({
          text: '请稍等'
        })
        let title = that.prizeList.items[index].name
        setTimeout(function () {
          that.$wechat.onMenuShareTimeline({
            title: '"' + title + '"祝你成为逸合·南充锦鲤，全城商家独宠一人，烤羊免费吃红包任性领',
            desc: that.$store.state.wxShareDesc,
            link: that.$store.state.wxShareLink,
            imgUrl: that.$store.state.wxShareImage,
            // 用户确认分享后执行的回调函数
            success: function () {
              console.log('内页分享朋友成功')
            },
            // 用户取消分享后执行的回调函数
            cancel: function () {
              console.log('内页取消分享朋友')
            }
          })
          that.$wechat.onMenuShareAppMessage({
            title: '"' + title + '"祝你成为逸合·南充锦鲤，全城商家独宠一人，烤羊免费吃红包任性领',
            desc: that.$store.state.wxShareDesc,
            link: that.$store.state.wxShareLink,
            imgUrl: that.$store.state.wxShareImage,
            // 用户确认分享后执行的回调函数
            success: function () {
              console.log('内页分享朋友成功')
            },
            // 用户取消分享后执行的回调函数
            cancel: function () {
              console.log('内页取消分享朋友')
            }
          })
          that.$vux.loading.hide()
          // 提示分享
          that.$vux.alert.show({
            title: '恭喜',
            content: '<div>商家冠名已生成~</div><div>请点击右上角分享朋友圈或发给朋友</div>'
          })
        }, 500)
      },
      // 获取奖品
      prizeListFunc: function () {
        this.$http.get(this.$appConfig.api_prize_list).then((response) => {
          if (response.data.code == 1 && response.data.data) { //eslint-disable-line
            this.prizeList = response.data.data
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wo-prize-list {
    padding: unified-unit(5px);
    .wo-item {
      padding: unified-unit(5px);
      .wo-item-head {
        display: flex;
        background-color: #f30;
        border-radius: 5px 5px 0 0;
        padding: unified-unit(10px);
        .wo-icon {
          flex: 0 0 unified-unit(50px);
          box-sizing: border-box;
          border: 1px solid $border-color;
          border-radius: 50%;
          background-color: #fff;
          overflow: hidden;
          img {
            border-radius: 50%;
          }
        }
        .wo-name {
          height: unified-unit(50px);
          padding: 0 unified-unit(10px);
          overflow: hidden;
          font-size: unified-unit(16px);
          line-height: unified-unit(25px);
          color: #fff;
        }
        .wo-price {
          flex: 1;
          height: unified-unit(50px);
          line-height: unified-unit(50px);
          font-size: unified-unit(12px);
          text-align: right;
          color: #fff;
          em {
            font-size: unified-unit(20px);
            font-weight: bold;
            font-style: normal;
          }
        }
      }
      .wo-item-body {
        background-color: #fff;
        border-top: 1px dashed $border-color;
        border-bottom: 1px dashed $border-color;
        padding: unified-unit(9px) unified-unit(10px);
      }
      .wo-item-foot {
        position: relative;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
        padding: unified-unit(10px);
        font-size: unified-unit(12px);
        line-height: unified-unit(20px);
        .wo-phone, .wo-address {
          display: flex;
          .wo-icon {
            flex: 0 0 unified-unit(20px);
            margin-right: unified-unit(5px);
          }
          span {
            display: block;
            height: unified-unit(20px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666;
          }
        }
        .wo-phone {
          margin-bottom: unified-unit(5px);
        }
        .wo-share {
          position: absolute;
          right: unified-unit(10px);
          top: 50%;
          transform: translateY(-50%);
          width: unified-unit(30px);
        }
      }
    }
    .wo-content {
      font-size: unified-unit(14px);
      line-height: unified-unit(25px);
      text-align: center;
    }
  }
</style>